<template>
  <el-select
    filterable
    collapse-tags
    v-model="state"
    class="width_100"
    :disabled="disabled"
    :multiple="multiple"
    collapse-tags-tooltip
    :clearable="clearable"
    :placeholder="placeholder"
    :filter-method="querySearch"
    @change="change"
    @focus="focus"
  >
    <el-option
      v-for="item in optionsList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    ></el-option>

    <div class="flex add" @click="handleAdd">
      <span class="title">自定义</span>
    </div>
  </el-select>
</template>

<script setup lang="ts">
  import { AxiosPromise } from 'axios'
  import { ElMessageBox } from 'element-plus'
  import request from '~/src/utils/request'
  /**
   * @props
   */

  const props = defineProps({
    // 值
    value: {
      type: String,
      default: '',
    },
    // 筛选
    options: {
      type: Array,
      default: [],
    } as any,
    // 多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 清除
    clearable: {
      type: Boolean,
      default: true,
    },
    // 禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    placeholder: {
      type: String,
      default: '请选择',
    },
    // 添加api
    addAPi: {
      type: String,
      default: '',
    },
    // 添加要素
    addFactor: {
      type: Object,
      default: {},
    },
  })

  /**
   * @var
   */
  const proxy: any = getCurrentInstance()?.proxy
  const state = toRef(props.value)
  const optionsList = toRef<any>(props.options)
  /**
   * @method
   */
  const emit = defineEmits(['change', 'focus', 'customAdd'])

  // 全模糊
  const querySearch = (value: any) => {
    optionsList.value = props.options.filter((option: any) => {
      return (option?.label ?? '')
        ?.toLowerCase()
        .includes(value?.trim().toLowerCase())
    })
  }

  // 左模糊
  const querySearch1 = (queryString: string) => {
    const results = queryString
      ? props.options.filter(createFilter(queryString))
      : props.options
    optionsList.value = results
  }
  const createFilter = (queryString: any) => {
    return (restaurant: any) => {
      return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
      )
    }
  }
  // change事件
  const change = (value: any) => {
    emit('change', value)
  }
  //focus事件
  const focus = (value: any) => {
    emit('focus')
  }

  // 添加值
  const handleAdd = (va: any) => {
    const addFunc: (data: object) => AxiosPromise = (data) =>
      request(`${props.addAPi}`, { data })

    ElMessageBox.prompt(' ', `添加${props.addFactor.module_name}`, {
      confirmButtonText: '提交',
      cancelButtonText: '取消',
      center: true,
      inputErrorMessage: 'Invalid Email',
    }).then(({ value }) => {
      addFunc({
        ...props.addFactor,
        label: value.trim(),
        sort: 50,
      }).then((data: any) => {
        proxy.$Message('添加成功', 'success')
        emit('customAdd')
      })
    })
  }

  watch(
    () => props.options,
    (newValue, oldValue) => {
      optionsList.value = newValue
    },
    { deep: true }
  )
  watch(
    () => props.value,
    (newValue, oldValue) => {
      state.value = newValue
    },
    { deep: true, immediate: true }
  )
</script>

<style scoped>
  .add {
    padding: 0 20px;
    cursor: pointer;
    .title {
      display: inline-block;
      font-size: 14px;
      padding: 12px 0;
    }
    .add_input {
      margin-right: 12px;
    }
  }
</style>
